@import "../../../css/global";

$rem: 7.5rem / 2717;

body {
  background: white !important;
  .status-bar, .header {
    width: 100%;
  }
}

.main {
  padding: 210*$rem 111*$rem;
}

.line {
  height: .02rem;
  background: rgba(242, 240, 245, 1);
}

.explain {
  height: 403*$rem;
  margin: 0 127*$rem;
  & > div {
    .icon {
      display: inline-block;
      width: .4rem;
      height: .4rem;
      margin: 0 .12rem 0 .24rem;
    }
    span {
      height: .4rem;
      font-size: 72*$rem;
      line-height: 72*$rem;
      &:nth-child(2) {
        color: rgba(220, 85, 3, 1);
      }
      &:nth-child(3) {
        margin-left: 80*$rem;
        color: rgba(255, 0, 0, 1);
      }
      &:nth-child(4) {
        color: rgba(0, 0, 0, 1);
      }
    }
  }
}

.input, .select, .date {
  height: 302 * $rem;
  margin: 0 .3rem;
}

.input {
  div {
    width: 2.5rem;
    height: 107*$rem;
    font-size: 107*$rem;
    color: rgba(0, 0, 0, 1);
    line-height: 107*$rem;
  }
  input {
    width: 4.4rem !important;
    height: .32rem !important;
    font-size: .28rem !important;
    color: rgba(0, 0, 0, 1) !important;
    line-height: .32rem !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-user-select: text !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background-color: #fff !important;
    -webkit-appearance: none !important;
  }
}

.select, .date {
  div {
    width: 2.5rem;
    height: 107*$rem;
    font-size: 107*$rem;
    color: rgba(0, 0, 0, 1);
    line-height: 107*$rem;
  }
  span {
    width: 4rem;
    height: .32rem;
    font-size: .28rem;
    color: rgba(250, 48, 45, 1);
    line-height: .32rem;
    &.selected {
      color: rgba(34, 34, 34, 1);
    }
  }
  .arrow {
    width: .2rem;
    height: .2rem;
    margin-left: .2rem;
    background: url("../../../img/ic_list_arrow_right.png") center no-repeat;
    background-size: contain;
  }
}

.footer {
  height: auto;
  background: none;
  button {
    width: 1057*$rem;
    height: 223*$rem;
    margin: 144*$rem;
    background: rgba(255, 0, 0, 1);
    font-size: 100*$rem;
    color: rgba(255, 255, 255, 1);
    line-height: 100*$rem;
    border-radius: 0.1rem;
  }
}

.info {
  margin-bottom: .3rem;
  div {
    min-width: 696*$rem;
    min-height: 165*$rem;
    padding: 45*$rem 83*$rem;
    background: rgba(234, 75, 75, 1);
    border-radius: 30*$rem;
    font-size:41 * 7.5rem / 1200;
    font-weight:normal;
    color:rgba(255,255,255,1);
    line-height:32 * 7.5rem / 1200;
  }
}

.people {
  margin-bottom: 159*$rem;
  .line {
    width: 3 * 7.5rem / 1200;
    height: 3.4rem;
    background: #b1b1b1;
  }
  .customer, .service {
    &>div>:nth-child(4),&>div>:nth-child(5){
      width: 2.8rem;
    }
    .img {
      width: 360 *$rem;
      height: 360 *$rem;
      margin: .1rem;
      border-radius: 180*$rem;
    }
    .name,.tel,.contact,.mobile{
      width: 96*$rem;
      height: 96*$rem;
      margin:.1rem;
    }
    .name {
      background: url("../../../img/order/1.png") center no-repeat;
      background-size: contain;
    }
    .tel {
      background: url("../../../img/order/2.png") center no-repeat;
      background-size: contain;
    }
    .contact {
      background: url("../../../img/order/3.png") center no-repeat;
      background-size: contain;
    }
    .mobile {
      background: url("../../../img/order/6.png") center no-repeat;
      background-size: contain;
    }
    .company {
      margin-top: .24rem;
      font-size: 0.24rem;
      color: rgba(0, 0, 0, 1);

      overflow: hidden;
      text-align: center;
    }

    span {
      margin: .14rem 0;
      font-size: .32rem;

      color: #000000;
    }
    .blue {
      color: rgba(122, 180, 225, 1);
      word-break: break-all;
    }
    .red {
      color: rgba(250, 48, 45, 1);
      font-size: .32rem;
      margin-bottom: .2rem;
    }
  }
}

.conformity, .inconformity, .culture {
  padding: 29 * 7.5rem / 1200 0;
  border-bottom: .02rem solid #b1b1b1;
  div {
    li {
      span {
        width: .24rem;
        height: .24rem;
        background: url(../../../img/home/dot.png) center no-repeat;
        background-size: contain;
        margin: 0 28 * 7.5rem / 1200 0 56 * 7.5rem / 1200;
      }
      p {
        border-bottom: .02rem solid #b1b1b1;
        padding: 29 * 7.5rem / 1200 0;
        font-size: .32rem;
        font-weight: normal;
        color: rgba(37, 37, 37, 1);
        line-height: .32rem;
      }
      &:nth-last-child(1) {
        p {
          border-bottom: none;
        }
      }
      list-style: none;
    }
    &:nth-child(1) {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 46 * 7.5rem / 1200 + 2*29 * 7.5rem / 1200;
      & > div {
        width: 2rem;
        height: .6rem;
        background: rgba(68, 138, 202, 1);
        opacity: 0.67;
        border-radius: 10 * 7.5rem / 1200;
        box-shadow: 1 * 7.5rem / 1200 0 * 7.5rem / 1200 6 * 7.5rem / 1200 rgba(12, 3, 6, 0.78);
        font-size: .32rem;
        font-weight: normal;
        color: rgba(255, 255, 255, 1);
        line-height: .32rem;
      }
    }
  }
}

.culture {
  border-bottom: none;
}

.status {
  margin: .43rem 0;
  width: 2563*$rem;
  div:nth-child(1), div:nth-child(3), div:nth-child(5), div:nth-child(7) {
    width: 1.02rem;
    height: 1.02rem;
    background: #ffffff;
    border: solid .02rem #959595;
    border-radius: .51rem;
    &.done {
      background: rgba(250, 48, 45, 1);
      border: none;
      span {
        color: #ffffff;
      }
    }
    span {
      margin: .2rem;
      font-size: 0.24rem;
      color: rgba(114, 114, 114, 1);
      line-height: 0.24rem;
      text-align: center;
    }
  }
  div:nth-child(2), div:nth-child(4), div:nth-child(6) {
    height: .1rem;
    background: url("../../../img/icon-xx1@2x.png") center no-repeat;
    background-size: contain;
    &.done {
      background: url("../../../img/icon-xx@2x.png") center no-repeat;
      background-size: contain;
    }

  }
}

.matching {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  img {
    width: 2.5rem;
    height: 2.5rem;
  }
}